<template>
	<div ref="chartDom" class="chart" :style="props.style" v-loading="isLoding"></div>
</template>

<script setup lang="ts" name="lineCharts1">
import * as echarts from 'echarts';
import { getTalentCycle } from '/@/api/cx/list';

const props = defineProps({
	// 数据
	data: {
		type: [Object, String],
	},
	talentId: {
		type: [Number, String],
	},
	// 样式
	style: {
		type: String,
		default: 'width: 100%;height: 400px;',
	},
});
const chartDom = ref();
let myChart = null;
const isLoding = ref(false);

// 数据
const state = reactive<any>({
	xData: [],
	yData: [],
});

function mapInit() {
	myChart = echarts.init(chartDom.value);
	let option: any = {};
	if (state.xData.length > 0) {
		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'line',
					lineStyle: {
						color: 'rgba(0,0,0,0.2)',
						width: 1,
						type: 'solid',
					},
				},
			},
			legend: {
				data: state.xData,
			},
			singleAxis: {
				top: 50,
				bottom: 50,
				axisTick: {},
				axisLabel: {},
				type: 'time',
				axisPointer: {
					animation: true,
					label: {
						show: true,
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						opacity: 0.2,
					},
				},
			},
			dataZoom: [
				{
					type: 'inside',
				},
				{
					type: 'slider',
				},
			],
			series: [
				{
					type: 'themeRiver',
					emphasis: {
						itemStyle: {
							shadowBlur: 20,
							shadowColor: 'rgba(0, 0, 0, 0.8)',
						},
					},
					data: state.yData,
					// data: [
					// 	['2015/11/08', 10, '技术领域1'],
					// 	['2015/11/09', 15, '技术领域1'],
					// 	['2015/11/10', 35, '技术领域1'],
					// 	['2015/11/11', 38, '技术领域1'],
					// 	['2015/11/12', 22, '技术领域1'],
					// 	['2015/11/13', 16, '技术领域1'],
					// 	['2015/11/14', 7, '技术领域1'],
					// 	['2015/11/15', 2, '技术领域1'],
					// 	['2015/11/16', 17, '技术领域1'],
					// 	['2015/11/17', 33, '技术领域1'],
					// 	['2015/11/18', 40, '技术领域1'],
					// 	['2015/11/19', 32, '技术领域1'],
					// 	['2015/11/20', 26, '技术领域1'],
					// 	['2015/11/21', 35, '技术领域1'],
					// 	['2015/11/22', 40, '技术领域1'],
					// 	['2015/11/23', 32, '技术领域1'],
					// 	['2015/11/24', 26, '技术领域1'],
					// 	['2015/11/25', 22, '技术领域1'],
					// 	['2015/11/26', 16, '技术领域1'],
					// 	['2015/11/27', 22, '技术领域1'],
					// 	['2015/11/28', 10, '技术领域1'],
					// 	['2015/11/08', 35, '技术领域2'],
					// 	['2015/11/09', 36, '技术领域2'],
					// 	['2015/11/10', 37, '技术领域2'],
					// 	['2015/11/11', 22, '技术领域2'],
					// 	['2015/11/12', 24, '技术领域2'],
					// 	['2015/11/13', 26, '技术领域2'],
					// 	['2015/11/14', 34, '技术领域2'],
					// 	['2015/11/15', 21, '技术领域2'],
					// 	['2015/11/16', 18, '技术领域2'],
					// 	['2015/11/17', 45, '技术领域2'],
					// 	['2015/11/18', 32, '技术领域2'],
					// 	['2015/11/19', 35, '技术领域2'],
					// 	['2015/11/20', 30, '技术领域2'],
					// 	['2015/11/21', 28, '技术领域2'],
					// 	['2015/11/22', 27, '技术领域2'],
					// 	['2015/11/23', 26, '技术领域2'],
					// 	['2015/11/24', 15, '技术领域2'],
					// 	['2015/11/25', 30, '技术领域2'],
					// 	['2015/11/26', 35, '技术领域2'],
					// 	['2015/11/27', 42, '技术领域2'],
					// 	['2015/11/28', 42, '技术领域2'],
					// 	['2015/11/08', 21, '技术领域3'],
					// 	['2015/11/09', 25, '技术领域3'],
					// 	['2015/11/10', 27, '技术领域3'],
					// 	['2015/11/11', 23, '技术领域3'],
					// 	['2015/11/12', 24, '技术领域3'],
					// 	['2015/11/13', 21, '技术领域3'],
					// 	['2015/11/14', 35, '技术领域3'],
					// 	['2015/11/15', 39, '技术领域3'],
					// 	['2015/11/16', 40, '技术领域3'],
					// 	['2015/11/17', 36, '技术领域3'],
					// 	['2015/11/18', 33, '技术领域3'],
					// 	['2015/11/19', 43, '技术领域3'],
					// 	['2015/11/20', 40, '技术领域3'],
					// 	['2015/11/21', 34, '技术领域3'],
					// 	['2015/11/22', 28, '技术领域3'],
					// 	['2015/11/23', 26, '技术领域3'],
					// 	['2015/11/24', 37, '技术领域3'],
					// 	['2015/11/25', 41, '技术领域3'],
					// 	['2015/11/26', 46, '技术领域3'],
					// 	['2015/11/27', 47, '技术领域3'],
					// 	['2015/11/28', 41, '技术领域3'],
					// 	['2015/11/08', 10, '技术领域4'],
					// 	['2015/11/09', 15, '技术领域4'],
					// 	['2015/11/10', 35, '技术领域4'],
					// 	['2015/11/11', 38, '技术领域4'],
					// 	['2015/11/12', 22, '技术领域4'],
					// 	['2015/11/13', 16, '技术领域4'],
					// 	['2015/11/14', 7, '技术领域4'],
					// 	['2015/11/15', 2, '技术领域4'],
					// 	['2015/11/16', 17, '技术领域4'],
					// 	['2015/11/17', 33, '技术领域4'],
					// 	['2015/11/18', 40, '技术领域4'],
					// 	['2015/11/19', 32, '技术领域4'],
					// 	['2015/11/20', 26, '技术领域4'],
					// 	['2015/11/21', 35, '技术领域4'],
					// 	['2015/11/22', 40, '技术领域4'],
					// 	['2015/11/23', 32, '技术领域4'],
					// 	['2015/11/24', 26, '技术领域4'],
					// 	['2015/11/25', 22, '技术领域4'],
					// 	['2015/11/26', 16, '技术领域4'],
					// 	['2015/11/27', 22, '技术领域4'],
					// 	['2015/11/28', 10, '技术领域4'],
					// 	['2015/11/08', 10, '技术领域5'],
					// 	['2015/11/09', 15, '技术领域5'],
					// 	['2015/11/10', 35, '技术领域5'],
					// 	['2015/11/11', 38, '技术领域5'],
					// 	['2015/11/12', 22, '技术领域5'],
					// 	['2015/11/13', 16, '技术领域5'],
					// 	['2015/11/14', 7, '技术领域5'],
					// 	['2015/11/15', 2, '技术领域5'],
					// 	['2015/11/16', 17, '技术领域5'],
					// 	['2015/11/17', 33, '技术领域5'],
					// 	['2015/11/18', 40, '技术领域5'],
					// 	['2015/11/19', 32, '技术领域5'],
					// 	['2015/11/20', 26, '技术领域5'],
					// 	['2015/11/21', 35, '技术领域5'],
					// 	['2015/11/22', 4, '技术领域5'],
					// 	['2015/11/23', 32, '技术领域5'],
					// 	['2015/11/24', 26, '技术领域5'],
					// 	['2015/11/25', 22, '技术领域5'],
					// 	['2015/11/26', 16, '技术领域5'],
					// 	['2015/11/27', 22, '技术领域5'],
					// 	['2015/11/28', 10, '技术领域5'],
					// 	['2015/11/08', 10, '技术领域6'],
					// 	['2015/11/09', 15, '技术领域6'],
					// 	['2015/11/10', 35, '技术领域6'],
					// 	['2015/11/11', 38, '技术领域6'],
					// 	['2015/11/12', 22, '技术领域6'],
					// 	['2015/11/13', 16, '技术领域6'],
					// 	['2015/11/14', 7, '技术领域6'],
					// 	['2015/11/15', 2, '技术领域6'],
					// 	['2015/11/16', 17, '技术领域6'],
					// 	['2015/11/17', 33, '技术领域6'],
					// 	['2015/11/18', 4, '技术领域6'],
					// 	['2015/11/19', 32, '技术领域6'],
					// 	['2015/11/20', 26, '技术领域6'],
					// 	['2015/11/21', 35, '技术领域6'],
					// 	['2015/11/22', 40, '技术领域6'],
					// 	['2015/11/23', 32, '技术领域6'],
					// 	['2015/11/24', 26, '技术领域6'],
					// 	['2015/11/25', 22, '技术领域6'],
					// 	['2015/11/26', 16, '技术领域6'],
					// 	['2015/11/27', 22, '技术领域6'],
					// 	['2015/11/28', 10, '技术领域6'],
					// ],
				},
			],
		};
	} else {
		option = {
			title: {
				text: '暂无数据',
				x: 'center',
				y: 'center',
				textStyle: {
					fontSize: 14,
					fontWeight: 'normal',
				},
			},
		};
	}

	option && myChart.setOption(option);
}
onMounted(() => {
	let param = {
		talentId: props.talentId,
	};
	isLoding.value = true;
	getTalentCycle(param)
		.then((res) => {
			if (res.code == 0) {
				let list = (state.xData = res.data.map((n: any) => {
					return n[2];
				}));
				const set = new Set(list);
				state.xData = [...set];
				state.yData = res.data.map((n) => {
					n[0] = String(n[0]);
					return n;
				});
				mapInit();
			}
		})
		.catch(() => {
			state.xData = [];
			state.yData = [];
			mapInit();
		})
		.finally(() => {
			isLoding.value = false;
		});
});
</script>

<style lang="scss" scoped>
.chart {
	height: 500px;
}
</style>
